import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Image, Text, View} from '@tarojs/components'
import {COUPON_LIST, COUPON_RECEIVE, RESOURCE_URL} from "../../constants/api";
import {newHttp} from "../../utils/request";
import {GetRequest, vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './list.scss'

export default class List extends Component {
  state: {
    loadMoreStatus: "more" | "loading" | "noMore"
    list: object[]
    select: number
  } = {
    loadMoreStatus: 'loading',
    list: [],
    select: 0
  }

  async UNSAFE_componentWillMount() {
    const select = Taro.getCurrentInstance().router.params.select || 0
    this.setState({select})
  }

  async componentDidShow() {
    vcmonitor(this)
    this.page = 1
    const list = await this.getData(this.page)
    this.setState({list})
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore' && this.state.loadMoreStatus != 'loading') {
      this.setState({loadMoreStatus: 'loading'})
      this.page++
      const list = await this.getData(this.page)
      const old = this.state.list
      if (list) {
        this.setState({list: [...old, ...list]})
      }
    }
  }

  async onPullDownRefresh() {
    this.page = 1
    const list = await this.getData(this.page)
    this.setState({list})
    Taro.stopPullDownRefresh()
  }

  page = 1

  async getData(page) {
    const list = await newHttp.catchPost(COUPON_LIST, {p: page, s: 10, k: ''})
    if (list && list.length === 10) {
      this.setState({loadMoreStatus: 'more'})

    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    return list || []
  }

  itemClick(item) {
    Taro.navigateTo({
      url: '/main/coupon/detail?uuid=' + item.uuid
    })
  }

  async receive(coupon_uuid, index, e) {
    e.stopPropagation()
    const {list} = this.state
    const ret = await newHttp.post(COUPON_RECEIVE, {coupon_uuid},true)
    if (ret.data != undefined) {
      list[index].is_can_receive = ret.data.isCanReceiveCoupon
      Taro.showToast({
        title: '领取成功',
        icon: 'none',
        mask: true
      })
      this.setState({list})
      setTimeout(() => {
        if (ret.data.isUseId) {
          Taro.navigateTo({
            url: '/main/coupon/coupon-goods?id=' + ret.data.isUseId
          })
        }
      }, 2000)
    } else {
      Taro.showToast({
        title: ret.message || '领取失败',
        icon: 'none',
        mask: true
      })
    }
  }

  render() {
    const {list, select} = this.state
    return (
      <View className='coupon-root'>
        <GzhAuth />
        {list && list.map((item, index) => <View key={index} className='item'
          hoverClass={`${select && 'hover'}`}
          onClick={this.itemClick.bind(this, item)}
        >
          <View className='left'>
            <View className='left-top'>￥<Text>{item.discounts_money}</Text></View>
            <View className='left-bottom'>{!!item.can_use_limit ? `满${item.can_use_limit_money}可用` : '无门槛'}</View>
          </View>
          <View className='right'>
            <View className='right-name'>{item.name}</View>
            <View className='right-manjian text-overflow'>{item.reduction_str}</View>
            <View className='right-yxq'>{item.date_show}</View>
            {item.is_can_receive === 2 && <Image className='right-end' mode='widthFix'
              src='https://resource.ivcheng.com/upload/images/20210525/1621945212040_603.png'
            />}
            {item.is_can_receive === 1 && <Image className='right-end' mode='widthFix'
              src='https://resource.ivcheng.com/resources/images/couponIcon.png'
            />}
            {item.is_can_receive === 0 &&
            <View onClick={this.receive.bind(this, item.uuid, index)} className='right-receive'>立即领取</View>}
          </View>
        </View>)}
        {list.length <= 0 && <View className='listNull'>
          <Image src={`${RESOURCE_URL}/upload/images/20211112/1636708674979_153.png`} mode='widthFix' />
          <View className='text'>暂无数据</View>
        </View>}
        <View style='height: 30px;' />
      </View>
    )
  }
}
